<template>
  <a-tabs>
    <a-tab-pane key="6">
      <template #tab>
        <div>
          <appstore-add-outlined/>
          网站通用图标
        </div>
      </template>
      <div class="icon_item" :style="{maxHeight:maxHeight?maxHeight:'100%'}">
        <component v-for="e in websiteUniversalIcons" :is="$icons[e]" class="_icon_ mHand" @click.stop="clickItem(e)"/>
      </div>
    </a-tab-pane>

    <a-tab-pane key="5">
      <template #tab>
        <div>
          <html5-outlined/>
          品牌和标识
        </div>
      </template>
      <div class="icon_item" :style="{maxHeight:maxHeight?maxHeight:'100%'}">
        <component v-for="e in brandSndLogo" :is="$icons[e]" class="_icon_ mHand" @click.stop="clickItem(e)"/>
      </div>
    </a-tab-pane>

    <a-tab-pane key="3">
      <template #tab>
        <div>
          <form-outlined/>
          编辑类图标
        </div>
      </template>
      <div class="icon_item" :style="{maxHeight:maxHeight?maxHeight:'100%'}">
        <component v-for="e in editIcon" :is="$icons[e]" class="_icon_ mHand" @click.stop="clickItem(e)"/>
      </div>
    </a-tab-pane>

    <a-tab-pane key="2">
      <template #tab>
        <div>
          <exclamation-circle-outlined/>
          提示建议性图标
        </div>
      </template>
      <div class="icon_item" :style="{maxHeight:maxHeight?maxHeight:'100%'}">
        <component v-for="e in suggestiveIcon" :is="$icons[e]" class="_icon_ mHand" @click.stop="clickItem(e)"/>
      </div>
    </a-tab-pane>

    <a-tab-pane key="1">
      <template #tab>
        <span>
          <fullscreen-outlined/>
          方向性图标
        </span>
      </template>
      <div class="icon_item" :style="{maxHeight:maxHeight?maxHeight:'100%'}">
        <component v-for="e in directionalIcon" :is="$icons[e]" class="_icon_ mHand" @click.stop="clickItem(e)"/>
      </div>
    </a-tab-pane>

    <a-tab-pane key="4">
      <template #tab>
        <div>
          <area-chart-outlined/>
          数据类图标
        </div>
      </template>
      <div class="icon_item" :style="{maxHeight:maxHeight?maxHeight:'100%'}">
        <component v-for="e in dataIcon" :is="$icons[e]" class="_icon_ mHand" @click.stop="clickItem(e)"/>
      </div>
    </a-tab-pane>
  </a-tabs>
</template>

<script lang="ts">
import {defineComponent} from "vue";
import {humpToBar} from "@/common/util/kit";

export default defineComponent({
  name: "SelectIcon",
  props: {
    maxHeight: {
      type: Object,
      required: false,
    },
  },
  components: {},
  data() {
    return {
      // 方向性图标
      directionalIcon: [
        "StepBackwardOutlined",
        "StepForwardOutlined",
        "FastBackwardOutlined",
        "FastForwardOutlined",
        "ShrinkOutlined",
        "ArrowsAltOutlined",
        "DownOutlined",
        "UpOutlined",
        "LeftOutlined",
        "RightOutlined",
        "CaretUpOutlined",
        "CaretDownOutlined",
        "CaretLeftOutlined",
        "CaretRightOutlined",
        "UpCircleOutlined",
        "DownCircleOutlined",
        "LeftCircleOutlined",
        "RightCircleOutlined",
        "DoubleRightOutlined",
        "DoubleLeftOutlined",
        "VerticalLeftOutlined",
        "VerticalRightOutlined",
        "VerticalAlignTopOutlined",
        "VerticalAlignMiddleOutlined",
        "VerticalAlignBottomOutlined",
        "ForwardOutlined",
        "BackwardOutlined",
        "RollbackOutlined",
        "EnterOutlined",
        "RetweetOutlined",
        "SwapOutlined",
        "SwapLeftOutlined",
        "SwapRightOutlined",
        "ArrowUpOutlined",
        "ArrowDownOutlined",
        "ArrowLeftOutlined",
        "ArrowRightOutlined",
        "PlayCircleOutlined",
        "UpSquareOutlined",
        "DownSquareOutlined",
        "LeftSquareOutlined",
        "RightSquareOutlined",
        "LoginOutlined",
        "LogoutOutlined",
        "MenuFoldOutlined",
        "MenuUnfoldOutlined",
        "BorderBottomOutlined",
        "BorderHorizontalOutlined",
        "BorderInnerOutlined",
        "BorderOuterOutlined",
        "BorderLeftOutlined",
        "BorderRightOutlined",
        "BorderTopOutlined",
        "BorderVerticleOutlined",
        "PicCenterOutlined",
        "PicLeftOutlined",
        "PicRightOutlined",
        "RadiusBottomleftOutlined",
        "RadiusBottomrightOutlined",
        "RadiusUpleftOutlined",
        "RadiusUprightOutlined",
        "FullscreenOutlined",
        "FullscreenExitOutlined",
      ],
      // 提示建议性图标
      suggestiveIcon: [
        "QuestionOutlined",
        "QuestionCircleOutlined",
        "PlusOutlined",
        "PlusCircleOutlined",
        "PauseOutlined",
        "PauseCircleOutlined",
        "MinusOutlined",
        "MinusCircleOutlined",
        "PlusSquareOutlined",
        "MinusSquareOutlined",
        "InfoOutlined",
        "InfoCircleOutlined",
        "ExclamationOutlined",
        "ExclamationCircleOutlined",
        "CloseOutlined",
        "CloseCircleOutlined",
        "CloseSquareOutlined",
        "CheckOutlined",
        "CheckCircleOutlined",
        "CheckSquareOutlined",
        "ClockCircleOutlined",
        "WarningOutlined",
        "IssuesCloseOutlined",
        "StopOutlined",],
      // 编辑类图标
      editIcon: [
        "EditOutlined",
        "FormOutlined",
        "CopyOutlined",
        "ScissorOutlined",
        "DeleteOutlined",
        "SnippetsOutlined",
        "DiffOutlined",
        "HighlightOutlined",
        "AlignCenterOutlined",
        "AlignLeftOutlined",
        "AlignRightOutlined",
        "BgColorsOutlined",
        "BoldOutlined",
        "ItalicOutlined",
        "UnderlineOutlined",
        "StrikethroughOutlined",
        "RedoOutlined",
        "UndoOutlined",
        "ZoomInOutlined",
        "ZoomOutOutlined",
        "FontColorsOutlined",
        "FontSizeOutlined",
        "LineHeightOutlined",
        "DashOutlined",
        "SmallDashOutlined",
        "SortAscendingOutlined",
        "SortDescendingOutlined",
        "DragOutlined",
        "OrderedListOutlined",
        "UnorderedListOutlined",
        "RadiusSettingOutlined",
        "ColumnWidthOutlined",
        "ColumnHeightOutlined",
      ],
      // 数据类图标
      dataIcon: [
        "AreaChartOutlined",
        "PieChartOutlined",
        "BarChartOutlined",
        "DotChartOutlined",
        "LineChartOutlined",
        "RadarChartOutlined",
        "HeatMapOutlined",
        "FallOutlined",
        "RiseOutlined",
        "StockOutlined",
        "BoxPlotOutlined",
        "FundOutlined",
        "SlidersOutlined",
      ],
      // 品牌和标识
      brandSndLogo: [
        "AndroidOutlined",
        "AppleOutlined",
        "WindowsOutlined",
        "IeOutlined",
        "ChromeOutlined",
        "GithubOutlined",
        "AliwangwangOutlined",
        "DingdingOutlined",
        "WeiboSquareOutlined",
        "WeiboCircleOutlined",
        "TaobaoCircleOutlined",
        "Html5Outlined",
        "WeiboOutlined",
        "TwitterOutlined",
        "WechatOutlined",
        "YoutubeOutlined",
        "AlipayCircleOutlined",
        "TaobaoOutlined",
        "SkypeOutlined",
        "QqOutlined",
        "MediumWorkmarkOutlined",
        "GitlabOutlined",
        "MediumOutlined",
        "LinkedinOutlined",
        "GooglePlusOutlined",
        "DropboxOutlined",
        "FacebookOutlined",
        "CodepenOutlined",
        "CodeSandboxOutlined",
        "AmazonOutlined",
        "GoogleOutlined",
        "CodepenCircleOutlined",
        "AlipayOutlined",
        "AntDesignOutlined",
        "AntCloudOutlined",
        "AliyunOutlined",
        "ZhihuOutlined",
        "SlackOutlined",
        "SlackSquareOutlined",
        "BehanceOutlined",
        "BehanceSquareOutlined",
        "DribbbleOutlined",
        "DribbbleSquareOutlined",
        "InstagramOutlined",
        "YuqueOutlined",
        "AlibabaOutlined",
        "YahooOutlined",
        "RedditOutlined",
        "SketchOutlined",
      ],
      // 网站通用图标
      websiteUniversalIcons: [
        "AccountBookOutlined",
        "AimOutlined",
        "AlertOutlined",
        "ApartmentOutlined",
        "ApiOutlined",
        "AppstoreAddOutlined",
        "AppstoreOutlined",
        "AudioOutlined",
        "AudioMutedOutlined",
        "AuditOutlined",
        "BankOutlined",
        "BarcodeOutlined",
        "BarsOutlined",
        "BellOutlined",
        "BlockOutlined",
        "BookOutlined",
        "BorderOutlined",
        "BorderlessTableOutlined",
        "BranchesOutlined",
        "BugOutlined",
        "BuildOutlined",
        "BulbOutlined",
        "CalculatorOutlined",
        "CalendarOutlined",
        "CameraOutlined",
        "CarOutlined",
        "CarryOutOutlined",
        "CiCircleOutlined",
        "CiOutlined",
        "ClearOutlined",
        "CloudDownloadOutlined",
        "CloudOutlined",
        "CloudServerOutlined",
        "CloudSyncOutlined",
        "CloudUploadOutlined",
        "ClusterOutlined",
        "CodeOutlined",
        "CoffeeOutlined",
        "CommentOutlined",
        "CompassOutlined",
        "CompressOutlined",
        "//consoleSqlOutlined",
        "ContactsOutlined",
        "ContainerOutlined",
        "ControlOutlined",
        "CopyrightCircleOutlined",
        "CopyrightOutlined",
        "CreditCardOutlined",
        "CrownOutlined",
        "CustomerServiceOutlined",
        "DashboardOutlined",
        "DatabaseOutlined",
        "DeleteColumnOutlined",
        "DeleteRowOutlined",
        "DeliveredProcedureOutlined",
        "DeploymentUnitOutlined",
        "DesktopOutlined",
        "DingtalkOutlined",
        "DisconnectOutlined",
        "DislikeOutlined",
        "DollarCircleOutlined",
        "DollarOutlined",
        "DownloadOutlined",
        "EllipsisOutlined",
        "EnvironmentOutlined",
        "EuroCircleOutlined",
        "EuroOutlined",
        "ExceptionOutlined",
        "ExpandAltOutlined",
        "ExpandOutlined",
        "ExperimentOutlined",
        "ExportOutlined",
        "EyeOutlined",
        "EyeInvisibleOutlined",
        "FieldBinaryOutlined",
        "FieldNumberOutlined",
        "FieldStringOutlined",
        "FieldTimeOutlined",
        "FileAddOutlined",
        "FileDoneOutlined",
        "FileExcelOutlined",
        "FileExclamationOutlined",
        "FileOutlined",
        "FileGifOutlined",
        "FileImageOutlined",
        "FileJpgOutlined",
        "FileMarkdownOutlined",
        "FilePdfOutlined",
        "FilePptOutlined",
        "FileProtectOutlined",
        "FileSearchOutlined",
        "FileSyncOutlined",
        "FileTextOutlined",
        "FileUnknownOutlined",
        "FileWordOutlined",
        "FileZipOutlined",
        "FilterOutlined",
        "FireOutlined",
        "FlagOutlined",
        "FolderAddOutlined",
        "FolderOutlined",
        "FolderOpenOutlined",
        "FolderViewOutlined",
        "ForkOutlined",
        "FormatPainterOutlined",
        "FrownOutlined",
        "FunctionOutlined",
        "FundProjectionScreenOutlined",
        "FundViewOutlined",
        "FunnelPlotOutlined",
        "GatewayOutlined",
        "GifOutlined",
        "GiftOutlined",
        "GlobalOutlined",
        "GoldOutlined",
        "GroupOutlined",
        "HddOutlined",
        "HeartOutlined",
        "HistoryOutlined",
        "HomeOutlined",
        "HourglassOutlined",
        "IdcardOutlined",
        "ImportOutlined",
        "InboxOutlined",
        "InsertRowAboveOutlined",
        "InsertRowBelowOutlined",
        "InsertRowLeftOutlined",
        "InsertRowRightOutlined",
        "InsuranceOutlined",
        "InteractionOutlined",
        "KeyOutlined",
        "LaptopOutlined",
        "LayoutOutlined",
        "LikeOutlined",
        "LineOutlined",
        "LinkOutlined",
        "Loading3QuartersOutlined",
        "LoadingOutlined",
        "LockOutlined",
        "MacCommandOutlined",
        "MailOutlined",
        "ManOutlined",
        "MedicineBoxOutlined",
        "MehOutlined",
        "MenuOutlined",
        "MergeCellsOutlined",
        "MessageOutlined",
        "MobileOutlined",
        "MoneyCollectOutlined",
        "MonitorOutlined",
        "MoreOutlined",
        "NodeCollapseOutlined",
        "NodeExpandOutlined",
        "NodeIndexOutlined",
        "NotificationOutlined",
        "NumberOutlined",
        "OneToOneOutlined",
        "PaperClipOutlined",
        "PartitionOutlined",
        "PayCircleOutlined",
        "PercentageOutlined",
        "PhoneOutlined",
        "PictureOutlined",
        "PlaySquareOutlined",
        "PoundCircleOutlined",
        "PoundOutlined",
        "PoweroffOutlined",
        "PrinterOutlined",
        "ProfileOutlined",
        "ProjectOutlined",
        "PropertySafetyOutlined",
        "PullRequestOutlined",
        "PushpinOutlined",
        "QrcodeOutlined",
        "ReadOutlined",
        "ReconciliationOutlined",
        "RedEnvelopeOutlined",
        "ReloadOutlined",
        "RestOutlined",
        "RobotOutlined",
        "RocketOutlined",
        "RotateLeftOutlined",
        "RotateRightOutlined",
        "SafetyCertificateOutlined",
        "SafetyOutlined",
        "SaveOutlined",
        "ScanOutlined",
        "ScheduleOutlined",
        "SearchOutlined",
        "SecurityScanOutlined",
        "SelectOutlined",
        "SendOutlined",
        "SettingOutlined",
        "ShakeOutlined",
        "ShareAltOutlined",
        "ShopOutlined",
        "ShoppingCartOutlined",
        "ShoppingOutlined",
        "SisternodeOutlined",
        "SkinOutlined",
        "SmileOutlined",
        "SolutionOutlined",
        "SoundOutlined",
        "SplitCellsOutlined",
        "StarOutlined",
        "SubnodeOutlined",
        "SwitcherOutlined",
        "SyncOutlined",
        "TableOutlined",
        "TabletOutlined",
        "TagOutlined",
        "TagsOutlined",
        "TeamOutlined",
        "ThunderboltOutlined",
        "ToTopOutlined",
        "ToolOutlined",
        "TrademarkCircleOutlined",
        "TrademarkOutlined",
        "TransactionOutlined",
        "TranslationOutlined",
        "TrophyOutlined",
        "UngroupOutlined",
        "UnlockOutlined",
        "UploadOutlined",
        "UsbOutlined",
        "UserAddOutlined",
        "UserDeleteOutlined",
        "UserOutlined",
        "UserSwitchOutlined",
        "UsergroupAddOutlined",
        "UsergroupDeleteOutlined",
        "VerifiedOutlined",
        "VideoCameraAddOutlined",
        "VideoCameraOutlined",
        "WalletOutlined",
        "WhatsAppOutlined",
        "WifiOutlined",
        "WomanOutlined",
      ],
    };
  },
  methods: {
    clickItem(e) {
      // let _toHump = this.$kit._toHump("_right_outlined_")
      // let barToHump = this.$kit.barToHump("-right-outlined-")
      // let humpTo_ = this.$kit.humpTo_("RightOutlined")
      // let humpToBar = this.$kit.humpToBar("RightOutlined")
      //
      // //console.log(_toHump)
      // //console.log(barToHump)
      // //console.log(humpTo_)
      // //console.log(humpToBar)

      this.$emit("clickItem", {cName: e, tName: humpToBar(e)})
    },
  }
})
</script>

<style scoped lang="less">
._icon_ {
  background: #FFFFFF;
  font-size: 20px;
  padding: 25px;
  border-radius: 0;
  transition: all .5s;
}

._icon_:hover {
  background: #1890FF;
  color: #FFFFFF;
  font-size: 50px;
  padding: 10px;
  border-radius: 5px;
  transition: all .5s;
}

.icon_item {
  display: flex;
  flex-wrap: wrap;
  overflow-y: auto;
  padding-bottom: 100px;
}


//:-webkit-scrollbar 滚动条整体部分，可以设置宽度啥的
//::-webkit-scrollbar-button 滚动条两端的按钮
//::-webkit-scrollbar-track  外层轨道
//::-webkit-scrollbar-track-piece  内层滚动槽
//::-webkit-scrollbar-thumb 滚动的滑块
//::-webkit-scrollbar-corner 边角
//::-webkit-resizer 定义右下角拖动块的样式
//

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, .12);
  border-radius: 3px;
  -webkit-box-shadow: inset 0 0 5px rgb(0 21 41 / 5%);
}

//::-webkit-scrollbar-thumb {
/* background: hsla(0,0%,100%,.2); */
/* border-radius: 3px; */
/* -webkit-box-shadow: inset 0 0 5px hsl(0deg 0% 100% / 5%); */
//}

::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, .06);
  /* border-radius: 3px; */
  /* -webkit-box-shadow: inset 0 0 5px rgb(0 21 41 / 5%); */
}

//::-webkit-scrollbar-track {
/* background: hsla(0,0%,100%,.15); */
/* border-radius: 3px; */
/* -webkit-box-shadow: inset 0 0 5px rgb(37 37 37 / 5%); */
//}


</style>
